<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-图书</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 300px;
        display: block;
    }

    .el-icon-circle-plus:hover{
        cursor: pointer;
    }
    [v-cloak] {
        display: none;
    }

</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4 df mb-9">
        <div>
            <el-form ref="form" :model="form" label-width="150px" :rules="rules">
                <el-form-item label="编号：" v-if="form.id">
                    <el-input v-model="form.id" style="width:400px;" readonly></el-input>
                </el-form-item>
                <el-form-item label="书籍名称：" prop="bookName" required>
                    <el-input v-model="form.bookName" style="width:400px;" placeholder="请输入书籍名称" ></el-input>
                </el-form-item>
                <el-form-item label="isbn：" prop="isbn" required>
                    <el-input v-model="form.isbn" style="width:400px;" placeholder="请输入isbn" ></el-input>
                </el-form-item>
                <el-form-item label="类型：" >
                    <el-select v-model="form.typeId" placeholder="请选择类型" size="small" filterable style="width:400px;" clearable >
                        <el-option
                                v-for="item in allTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片："  prop="picUrl">
<!--                    <input type="file" id="pic" name="pic" required/></td>-->
                    <el-upload
                            class="avatar-uploader"
                            action="/book/saveBookPic"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                    >
                        <img  :src="'/book/getLocalSystemPic?filePath='+ form.picUrl" class="avatar" v-if="form.picUrl" >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
<!--                <el-form-item label="库存量：" required prop="stock">-->
<!--                    <el-input v-model="form.stock" style="width:400px;" placeholder="请输入库存量"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="单价类型：" required prop="currencyType">
                    <el-select v-model="form.currencyType" placeholder="请选择单价类型" size="small" filterable style="width:400px;" clearable >
                        <el-option
                                v-for="item in allCurrencyTypeList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单价：" required prop="price">
                    <el-input v-model="form.price" style="width:400px;" placeholder="请输入单价"></el-input>
                </el-form-item>
                <el-form-item label="出版社：" required prop="publish">
                    <el-input v-model="form.publish" style="width:400px;" placeholder="请输入出版社"></el-input>
                </el-form-item>
                <el-form-item label="出版地：" required prop="publishPlace">
                    <el-input v-model="form.publishPlace" style="width:400px;" placeholder="请输入地"></el-input>
                </el-form-item>
                <el-form-item label="出版日期：" required prop="publishYear">
                    <el-date-picker
                            v-model="form.publishYear"
                            type="year"
                            placeholder="选择年" value-format="yyyy">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="语种："  prop="language">
<!--                    <el-input v-model="form.language" style="width:400px;" placeholder="请输入语种"></el-input>-->

                    <el-select v-model="form.language" placeholder="请选择类型" size="small" filterable style="width:400px;" clearable >
                        <el-option
                                v-for="item in allLanguageList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="版次：" required prop="revision">
                    <el-input v-model="form.revision" style="width:400px;" placeholder="请输入版次"></el-input>
                </el-form-item>
                <el-form-item label="页数：" required prop="pageMeta">
                    <el-input v-model="form.pageMeta" style="width:400px;" placeholder="请输入页数"></el-input>
                </el-form-item>
                <el-form-item label="载体形态：" required prop="carrierForm">
                    <el-input v-model="form.carrierForm" style="width:400px;" placeholder="请输入载体形态"></el-input>
                </el-form-item>
                <el-form-item label="作者：" required prop="author">
                    <el-input v-model="form.author" style="width:400px;" placeholder="请输入作者"></el-input>
                </el-form-item>
                <el-form-item label="存放地址：" prop="address">
                    <el-input v-model="form.address" style="width:400px;" placeholder="请输入存放地址"></el-input>
                </el-form-item>
                <el-form-item label="简介：" prop="description">
                    <el-input v-model="form.description" type="textarea" style="width:800px;" placeholder="请输入简介" :rows="10"></el-input>
                </el-form-item>

                <el-form-item label="主要责任者：" >
                    <el-button size="small" type="primary" @click="addMainResponsibility">添加主要责任人</el-button>
                    <el-table :data="mainResponsibilityTableData" border  class="mt-4">
                        <el-table-column label="主要责任人名称" >
                            <template slot-scope="scope" width="200">
                                <el-input v-model="scope.row.responsibilityName" placeholder="请输入主要责任人名称" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="附注" >
                            <template slot-scope="scope">
                                <el-input type="textarea" :rows="5" v-model="scope.row.responsibilityNote" placeholder="请输入附注" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="danger" size="small" @click="deleteMainResponsibilityMethod(scope.row,scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>

                <el-form-item label="次要责任者：" >
                    <el-button size="small" type="primary" @click="addNoMainResponsibility">添加次要责任人</el-button>
                    <el-table :data="noMainResponsibilityTableData" border style="width: 100%" class="mt-4">
                        <el-table-column label="次要责任人名称" width="350">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.responsibilityName" placeholder="请输入次要责任人名称" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="附注" width="350">
                            <template slot-scope="scope">
                                <el-input type="textarea" :rows="5" v-model="scope.row.responsibilityNote" placeholder="请输入附注" size="small"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="danger" size="small" @click="deleteNoMainResponsibilityMethod(scope.row,scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>



    </div>
</div>
</body>

<script type="text/javascript">

    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                form:{
                    bookName:"",
                    typeId:"",
                    stock:"",
                    price:"",
                    publish:"",
                    author:"",
                    address:"",
                    picUrl:"",
                    isbn:"",
                    publishPlace:"",
                    publishYear:"",
                    language:"",
                    revision:"",
                    carrierForm:"",
                    currencyType:"",
                    pageMeta:"",
                    vesion:"",

                },
                rules: {
                    bookName: [
                        { required: true, message: '请输入书籍名称', trigger: 'blur' }
                    ],
                    // stock: [
                    //     { required: true, message: '请输入库存量', trigger: 'blur' }
                    // ],
                    price: [
                        { required: true, message: '请输入单价', trigger: 'blur' }
                    ],
                    publish: [
                        { required: true, message: '请输入出版社', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '请输入作者', trigger: 'blur' }
                    ],
                    isbn: [
                        { required: true, message: '请输入isbn', trigger: 'blur' }
                    ],
                    publishPlace: [
                        { required: true, message: '请输入出版地', trigger: 'blur' }
                    ],
                    publishYear: [
                        { required: true, message: '请输入出版日期', trigger: 'blur' }
                    ],
                    /*language: [
                        { required: true, message: '请输入语种', trigger: 'blur' }
                    ],*/
                    revision: [
                        { required: true, message: '请输入版次', trigger: 'blur' }
                    ],
                    carrierForm: [
                        { required: true, message: '请输入载体形态', trigger: 'blur' }
                    ],
                },
                allTypeList:[],
                allLanguageList:[],
                allCurrencyTypeList:[],
                mainResponsibilityTableData:[],
                noMainResponsibilityTableData:[],
                deleteLoading:false,
            }
        },

        mounted() {
            let that = this;
            this.$nextTick(function () {
                let id = getQueryString("id")
                that.setAllSelectOptions();
                if(id){
                    that.form.id = id;
                    that.getBookByIdMethod(id);
                    //获取信息
                }


            });
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.form.picUrl = file.response;
            },
            setAllSelectOptions(){
                let that = this;
                getDicTSysdicMethodEL("book_language","allLanguageList",that);//语言
                getDicTSysdicMethodEL("currency_type","allCurrencyTypeList",that);//货币类型
                that.getAllTypeListMethod();
            },


            //获取所有的图书类型的数据
            getAllTypeListMethod() {
                let that = this;
                that.allTypeList = [];
                requestApiTB("type/getAllTypeList", {}, "POST", function (res) {
                    if (res.code === 0) {
                        that.allTypeList = res.data;
                    }
                });
            },


            // 提交的方法
            onSubmit() {
                let that = this;
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        //校验通过
                        //校验库存量
                        // if (!/^([1-9][0-9]*)$/.test(that.form.stock)) {
                        //     that.$message.error("库存量必须是正整数");
                        //     return;
                        // }
                        //校验价格
                        if (!/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/.test(that.form.price)) {
                            that.$message.error("单价格式错误：例如：1.23");
                            return;
                        }
                        if(!/^[1-9]\d*$/.test(that.form.pageMeta)){
                            that.$message.error("页数必须是正整数");
                            return;
                        }

                        let deepCopyForm = JSON.parse(JSON.stringify(that.form));
                        deepCopyForm.bookName = $.trim(deepCopyForm.bookName);
                        deepCopyForm.isbn = $.trim(deepCopyForm.isbn);
                        deepCopyForm.publish = $.trim(deepCopyForm.publish);
                        deepCopyForm.publishPlace = $.trim(deepCopyForm.publishPlace);
                        deepCopyForm.carrierForm = $.trim(deepCopyForm.carrierForm);
                        deepCopyForm.author = $.trim(deepCopyForm.author);
                        deepCopyForm.address = $.trim(deepCopyForm.address);
                        deepCopyForm.mainResponsibilitys = that.mainResponsibilityTableData;
                        deepCopyForm.noMainResponsibilitys = that.noMainResponsibilityTableData;
                        deepCopyForm.stock = 0;
                        for(let i = 0 ; i < that.mainResponsibilityTableData.length ; i++){
                            if(!that.mainResponsibilityTableData[i].responsibilityName){
                                that.$message.error("主要责任者的名称不能为空");
                                return;
                            }
                        }

                        for(let i = 0 ; i < that.noMainResponsibilityTableData.length ; i++){
                            if(!that.noMainResponsibilityTableData[i].responsibilityName){
                                that.$message.error("次要责任者的名称不能为空");
                                return;
                            }
                        }


                        let url = "";
                        if (!that.form.id) {
                            url = "book/addBook";
                        } else {
                            url = "book/editBook";
                        }
                        requestApiTB(url, deepCopyForm, 'POST', function (res) {
                            if (res.code === 0) {
                                if(url == "book/addBook"){
                                    alert("新增成功");
                                }else if(url == "book/editBook"){
                                    alert("编辑成功");
                                }

                                //that.$message.success("执行成功");
                                if (!that.form.id) {
                                    that.$refs['form'].resetFields();//重置字段
                                    that.mainResponsibilityTableData = [];
                                    that.noMainResponsibilityTableData = [];
                                }
                            } else {
                                that.$message.error(res.msg);
                            }
                        });
                    } else {
                        that.$message.error("表单校验不通过");
                        return false;
                    }
                });
            },

            //根据id获取图书的信息
            getBookByIdMethod() {
                let that = this;
                requestApiTB("book/getBookById", {"id": that.form.id}, 'POST', function (res) {
                    if (res.code === 0) {
                        that.form = res.data;
                        that.mainResponsibilityTableData = res.data.mainResponsibilitys;
                        that.noMainResponsibilityTableData = res.data.noMainResponsibilitys;
                    } else {
                        that.$message.error(res.msg);
                    }
                });
            },

            //添加主要责任人
            addMainResponsibility() {
                let that = this;
                that.mainResponsibilityTableData.push({
                    "responsibilityName":"",
                    "responsibilityNote":"",
                });
            },

            //添加次要责任人
            addNoMainResponsibility(){
                let that = this;
                that.noMainResponsibilityTableData.push({
                    "responsibilityName":"",
                    "responsibilityNote":"",
                });
            },

            //删除主要责任人
            deleteMainResponsibilityMethod(row,index){
                let that = this;
                that.mainResponsibilityTableData.splice(index, 1);
            },

            //删除次要责任人
            deleteNoMainResponsibilityMethod(row,index){
                let that = this;
                that.noMainResponsibilityTableData.splice(index, 1);
            }

        }
    })
</script>
</html>